<template>
	<view class="">
		<view :id="'good' + item.id" v-for="(item, ind) in order_list" :key="ind"
			class="item u-margin-left-30 u-margin-right-30 u-margin-top-50 u-margin-bottom-60 u-col-top u-flex u-row-between u-padding-top-15 u-padding-left-30 u-padding-right-20"
			@click="goto_detail(item)">
			<view class="u-flex-col u-row-around item-left">
				<text class="house_name u-font-34 ">{{ item.room_info.house_name }}</text>
				<text>入住时间</text>
				<text>{{ $u.timeFormat(item.start_time, 'mm月dd日') }}-{{ $u.timeFormat(item.end_time, 'mm月dd日') }}</text>
				<text v-if="index == 0">剩余时间{{ item.wait_time }}</text>
				<view class="">
					<text>单价</text>
					<text class="price u-margin-left-10">{{ item.price }}</text>
				</view>
			</view>
			<view class="">
				<view class="house_img u-margin-bottom-20 ">
					<!-- <text>{{$u.timeFormat(tem.start_time, 'yyyy年mm月dd日')}}</text> -->
					<u-image width="360rpx" height="255rpx" duration="300" :border-radius="10"
						:src="item.room_info.house_img" :fade="true">
						<u-loading slot="loading"></u-loading>
					</u-image>
					<view class="hinfo_name u-flex u-row-center">
						<text class="hinfo_name_text">{{ item.room_info.hinfo_name }}</text>
					</view>
				</view>
				<view v-if="index == 0" class="u-flex buttons u-row-between">
					<u-button size="mini" :custom-style="{ width: '150rpx', transform: 'translateY(-30rpx)' }"
						@click="inhouse(item)" :ripple="true" shape="circle">
						入住
					</u-button>
					<!-- width: '150rpx', -->
					<u-button size="mini" type="error"
						:custom-style="{width: '150rpx', transform: 'translateY(-30rpx)' }" @click="cancelOrder(item)"
						:ripple="true" shape="circle">
						取消
					</u-button>
				</view>

				<u-button v-if="index == 1" size="mini" type="warning"
					:custom-style="{ width: '360rpx', transform: 'translateY(-30rpx)' }" :ripple="true" shape="circle"
					@click="complete(item)">完成</u-button>
			</view>
		</view>

		<u-modal @confirm="confirm" v-model="modal_show" :show-cancel-button="true" content="您确定此次操作无误吗？"></u-modal>
		<u-toast ref="uToast" :icon='false' />
	</view>
</template>

<script>
	export default {
		name: 'Item',
		data() {
			return {
				modal_show: false,
				item: {},
				todo_type: '', // 操作类型
			};
		},
		methods: {
			// 订单已完成
			complete (item) {
				// business_complete
				this.todo_type = 'complete';
				this.modal_show = true;
				this.item = item;
			} ,
			
			// 用户入住
			inhouse(item) {
				console.log(item);
				this.todo_type = 'inhouse';
				this.modal_show = true;
				this.item = item;
			},

			// 点击确定
			confirm() {
				if(this.todo_type == 'complete') {
					this.$u.api.business_complete({
						order_id: this.item.id
					}).then(res => {
						if (res.code == 1) {
							this.Refresh();
						} else {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'warning',
								position: 'bottom',
								icon: false,
							})
						}
						this.item = {};
						this.todo_type = '';
					});
				} ;
				if (this.todo_type == 'cance') {
					this.$u.api.business_cancel({
						order_id: this.item.id
					}).then(res => {
						if (res.code == 1) {
							this.Refresh();
						}
						this.item = {};
						this.todo_type = '';
					});
				};
				if (this.todo_type == 'inhouse') {
					this.$u.api.business_inhouse({
						order_id: this.item.id
					}).then(res => {
						if (res.code == 1) {
							this.Refresh();
						} else {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'warning',
								position: 'bottom',
								icon: false,
							})
						}
						this.item = {};
						this.todo_type = '';
					});
				}

			},

			// 取消订单
			cancelOrder(item) {
				console.log(item);
				this.todo_type = 'cance';
				this.modal_show = true;
				this.item = item;
			},
			// 刷新列表
			Refresh() {
				// let page = Math.ceil(this.order_list.length / 10);
				// this.$emit('downCallback' , page);
				this.$emit('downCallback');
			},

			goto_detail(item) {
				this.$u.route({
					url: 'pages/business/orderDetails',
					params: {
						id: item.id,
						index: this.index // 订单类型
					}
				});
			}
		},
		props: {
			index: {
				// 当前tab的下标
				type: Number,
				default () {
					return 0;
				}
			},
			order_list: {
				type: Array,
				default: () => []
			}
		}
	};
</script>

<style lang="scss" scoped>
	.buttons {
		// background-color: red;
	}

	.price {
		color: #ff9900;
	}

	.item {
		box-shadow: 0rpx 0rpx 14rpx 0rpx #999;
		border-radius: 10rpx;
	}

	.item-left {
		height: 255rpx;
	}

	.house_name {
		font-weight: 700;
		color: #000000;
	}

	.hinfo_name_text {
		color: #ffffff;
	}

	.hinfo_name {
		position: absolute;
		bottom: 0rpx;
		left: 0rpx;
		background-color: rgba(0, 0, 0, 0.5);
		width: 360rpx;
		font-size: 30rpx;
		padding: 5rpx 0rpx;
		border-bottom-left-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
	}

	.house_img {
		position: relative;
		width: 360rpx;
		height: 255rpx;
		transform: translateY(-35rpx);
		box-shadow: 0rpx 0rpx 14rpx 0rpx #ddd;
	}
</style>
